<%@ page contentType="text/html;charset=UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="icon" href="${pageContext.request.contextPath}/lib/static/login/images/favicon.ico">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/lib/layui/css/layui.css" media="all">
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.min.js"></script>
    <script src="${pageContext.request.contextPath}/lib/static/common/js/jquery.form.js"></script>
    <script src="${pageContext.request.contextPath}/lib/layui/layui.js" charset="utf-8"></script>
</head>
<body>
<div class="layui-fluid">
    <div class="layui-row">
        <fieldset class="layui-elem-field layui-field-title">
            <legend>考勤管理</legend>
        </fieldset>
    </div>
    <hr class="layui-bg-red">

    <!--按钮及查询框组-->
    <div class="layui-row">
        <div class="layui-col-md-offset1">
            <form class="layui-form">
            <div class="layui-inline">
                <input class="layui-input" name="criteria" autocomplete="off" placeholder="姓名">
            </div>
            <button class="layui-btn layuiadmin-btn-admin" lay-submit="" lay-filter="search">
                <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
            </button>
            </form>
        </div>
    </div>

    <table class="layui-hide" id="attendanceTable" lay-filter="attendanceMonitor"></table>

    <script type="text/html" id="attendanceToolBar">
        <div class="layui-btn-container">
            <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="delByIds">删除选中</button>
            <button class="layui-btn layui-btn-sm" lay-event="addAll">新增考勤</button>
        </div>
    </script>

    <script type="text/html" id="attendanceBar">
        <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    </script>

    <script>
        var baseUrl = '${pageContext.request.contextPath}/attendance/'

        /*发送ajax请求访问后台*/
        function sendAjaxPostReq($, param, tableAttendanceIns, method) {
            $.post(
                baseUrl + method,
                param,
                function (result) {
                    if (result.code == 0) {
                        layer.msg(result.msg, {icon: 1});
                        /*刷新表格数据*/
                        tableAttendanceIns.reload({
                            url: baseUrl + "get"
                        });
                    } else {
                        layer.msg(result.msg, {icon: 5});
                    }
                },
                "json"
            );
        }

        /*公用根据id或ids删除用户*/
        function deleteByIds($, ids, tableAttendanceIns, len) {
            /*多项删除时没有选择数据时给出提示*/
            if (len < 1) {
                layer.alert('请至少选择一条您要删除的数据', {
                    skin: 'layui-layer-molv'
                    , closeBtn: 0
                });
                return;
            }
            layer.confirm("您选中了" + len + "条数据，确认删除？", function (index) {
                sendAjaxPostReq($, {ids:ids}, tableAttendanceIns,"deleteByIds");
                layer.close(index);
            });
        }


        layui.use(['jquery','table', 'form'], function () {
            var $ = layui.$;
            var table = layui.table;
            var form = layui.form;
            layer = layui.layer;
            var tableAttendanceIns = table.render({
                elem: '#attendanceTable'
                ,toolbar: '#attendanceToolBar'
                ,url:baseUrl+'get'
                /*修改默认向后台传递的页码、大小参数名*/
                , request: {
                    pageName: 'pageNo' //页码的参数名称，默认：page
                    , limitName: 'pageSize' //每页数据量的参数名，默认：limit
                }
                ,height: 'full-150'
                ,cols: [[{type: 'numbers'}
                    , {type: 'checkbox'}
                    ,{field: 'id', title: 'ID', sort: true, align: 'center'}
                    ,{field:'name', title: '姓名',sort:true, align: 'center'} //width 支持：数字、百分比和不填写。你还可以通过 minWidth 参数局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'type', title: '类型', sort: true, align: 'center'}
                    ,{field:'workTime', title: '时间', sort: true, align: 'center',width:180,templet:'<div>{{layui.laytpl.toDateString(d.workTime)}}</div>'}
                   /* ,{field:'ip', title: 'IP地址', align: 'center'}*/
                    ,{field:'status', title: '状态', sort: true, align: 'center'}
                    ,{field:'work', title: '工作性质', sort: true, align: 'center'}
                    ,{field:'cause', title: '备注', align: 'center'} //单元格内容水平居中
                    ,{fixed: 'right', title:'操作', align: 'center', toolbar: '#attendanceBar', width:150}
                ]]
                ,page: {
                    layout: ['limit', 'count', 'prev', 'page', 'next', 'skip']
                    ,groups: 5
                }
            });

            //头工具栏事件
            table.on('toolbar(attendanceMonitor)', function (obj) {
                var checkStatus = table.checkStatus(obj.config.id);
                switch (obj.event) {
                    case 'delByIds':
                        /*获得要删除的ids*/
                        var data = checkStatus.data;
                        var ids = [];
                        $.each(data, function (index, value) {
                            var id = value.id;
                            ids.push(id);
                        });
                        /*根据id删除数据*/
                        deleteByIds($, ids.toString(), tableAttendanceIns, data.length);
                        break;
                    case 'addAll':
                        openAttendanceEditLayer("添加考勤信息");
                        break;
                }
            });
            /*弹框公用方法*/
            function openAttendanceEditLayer(title,attendance) {
                layer.open({
                    content: [baseUrl + "attendance_edit"],
                    type: 2,
                    title: '<h2>'+ title +'</h2>',
                    maxmin: true,
                    shadeClose: true, //点击遮罩关闭层
                    offset: '50px',
                    area: ['800px', '530px'],
                    closeBtn: 2,
                    success: function (layero, index) {
                        if (attendance != null) {
                            var body = layer.getChildFrame('body', index);//获取弹出层的dom元素
                            body.find("input[name='name']").val(attendance.name).attr("readonly","");
                            body.find("input[name='type']").val(attendance.type);
                            body.find("input[name='workTime']").val(attendance.workTime);
                            /*body.find("input[name='ip']").val(attendance.ip);*/
                            body.find("input[name='status']").val(attendance.status);
                            body.find("input[name='work']").val(attendance.work);
                        }
                        layer.iframeAuto(index);
                        return false;
                    }
                });
            }
            //监听行工具事件
            table.on('tool(attendanceMonitor)', function (obj) {
                var data = obj.data;
                /*单项删除功能*/
                if (obj.event === 'del') {
                    /*根据id删除数据*/
                    deleteByIds($, data.id, tableAttendanceIns, 1);
                } else if (obj.event === 'edit') {
                    var editAttendanceId = data.id;
                    $.post(
                        baseUrl + "getAttendanceById",
                        {id:editAttendanceId},
                        function (result) {
                            var attendance = result;
                            openAttendanceEditLayer("修改考勤信息",attendance);
                        },
                        "json"
                    );
                }
            });
            /*查询功能*/
            form.on('submit(search)', function(data){
                tableAttendanceIns.reload({
                    url: baseUrl+"get"
                    ,method:"post" /*解决参数传递中文乱码*/
                    ,where: data.field
                });

                return false;
            });

            //时间戳处理
            layui.laytpl.toDateString=function(d,format){
                if (!d) {
                    return "";
                }
                var date = new Date(d)
                    ,ymd=[
                    this.digit(date.getFullYear(),4)
                    ,this.digit(date.getMonth()+1)
                    ,this.digit(date.getDate())
                ]
                    ,hms=[
                    this.digit(date.getHours())
                    ,this.digit(date.getMinutes())
                    ,this.digit(date.getSeconds())
                ];
                format=format||'yyyy-MM-dd HH:mm:ss';
                return format.replace(/yyyy/g,ymd[0])
                    .replace(/MM/g,ymd[1])
                    .replace(/dd/g,ymd[2])
                    .replace(/HH/g,hms[0])
                    .replace(/mm/g,hms[1])
                    .replace(/ss/g,hms[2])
            };
            //数字前置补零
            layui.laytpl.digit = function(num,length,end){
                var str='';
                num = String(num);
                length=length ||2;
                for(var i=num.length;i<length;i++){
                    str +='0';
                }
                return num<Math.pow(10,length) ? str+(num|0):num;
            };


        });
    </script>
</div>
</body>
</html>
